<template>
  <div class="login" :class="{ 'is-mobile': $isMobile }">
    <div class="login-form">
      <div class="login-form__title">用户登录</div>
      <div class="login-form__form">
        <el-form label-width="0px">
          <el-form-item prop="account">
            <el-input v-model="loginForm.account" placeholder="手机号/邮箱" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" show-password placeholder="密码"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm" class="form-btn">登录</el-button>
          </el-form-item>
        </el-form>
        <div class="tips">
          <div></div>
          <div @click="handleRegister">注册</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validateInput } from "@/utils/validate";
import { setToken, setUser } from "@/utils/auth";

export default {
  data() {
    return {
      loginForm: {
        account: "",
        password: "",
      },

    };
  },

  mounted() {
    this.loginForm = {
      account: "",
      password: "",
    }
  },

  methods: {
    async submitForm() {

      const { account, password } = this.loginForm;

      if (!account) {
        this.$message.warning("请输入帐号");
        return;
      }
      if (!password) {
        this.$message.warning("请输入密码");
        return;
      }

      if (!validateInput(account)) {
        return this.$message.warning("账户应为邮箱格式或手机号");
      }

      const { data, code } = await this.$fetch.post("/api/user/login", this.loginForm);
      if (code === 0) {
        const { token } = data;
        setToken(token);
        setUser(data);
        this.$emit("refresh")
      }

    },

    handleRegister() {
      this.$emit("changeMode", "register")
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  height: max-content;
  display: flex;
  flex-direction: column;
  background: #ffffff;

  ::v-deep .el-input {
    .el-input__inner {
      border-radius: 4px;
      border: 1px solid #d8d8d8;
    }
  }
}


.login-form {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;

  .login-form__title {
    width: 120px;
    height: 42px;
    margin-bottom: 20px;
    color: rgba(51, 51, 51, 1);
    font-size: 30px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    line-height: 42px;
  }

  .login-form__form {
    width: 400px;
  }

  .form-btn {
    width: 100%;
    height: 44px;
    background: #3560ab;
    border-radius: 4px;
    font-size: 16px;
    color: #ffffff;
  }
}

.tips {
  display: flex;
  justify-content: space-between;
  color: #484848;
  cursor: pointer;
}



.login.is-mobile {

  .login-form__form {
    width: 100%;
  }
  

} 
</style>
